<template>
    <div id="app">
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
        <p>千米：<input type="text" v-model="kmeters"></p>
        <p>米:<input type="text" v-model="meters"></p>
        <p><input type="text" v-model="fname"> </p>
        <p><input type="text" v-model="lname"> </p>
        <p>姓名：{{ fullName }}</p>
        <input type="text" v-model="city">
        <button @click="get_weather">点击获取天气</button>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        name: "Fst06",
        data(){
            return{
                city:'',
                message:'Hello',
                kmeters:0,
                meters:0,
                fname:"ww",
                lname:"zz",
                fullname:" "
            }
        },
        methods:{
            get_weather(){
                axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
                 .then(response=>{
                            console.log(response);
                        }).catch(error=>{
                            console.log(error.response)
                    });
            }
        },
        computed:{
            reversedMessage(){
                return this.message.split('').reverse().join('');
            },
            fullName: {
                get() { //读取当前属性值的回调，根据相关的数据计算并返回当前属性的值
                    return this.fname + ' ' + this.lname
                },
                set(val) { // 当属性值发生改变时回调，更新相关的属性数据，val就是fullName的最新属性值
                    const names = val ? val.split(' ') : [];
                    this.firstName = names[0]
                    this.lastName = names[1]
                }
            }
        },
        watch:{
            kmeters(val){
                this.kmeters=val;
                this.meters=this.kmeters*1000;
            },
            meters(val){
                this.kmeters=val/1000;
                this.meters=this.kmeters;
            }
        }

    }
</script>

<style scoped>

</style>